/*
 * @Author: 
 * @Date: 2022-02-11 11:18:44
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-14 14:48:55
 * @Description: 请填写简介
 */
import React, {
  // useState,
  // createRef,
  useRef
} from 'react'
import { Input, Button } from 'antd'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { personCreate } from '../../redux/module/person_redux'

function Person(props) {
  const personName = useRef()
  const personAge = useRef()
  const handleAdd = () => {
    // console.log(personName, personAge)
    const pName = personName.current.state.value
    const pAge = personAge.current.state.value
    if (pName === '' && pAge === '') return
    const obj = { id: nanoid(), name: pName, age: pAge }
    props.personList(obj)
    personName.current.state.value = ''
    personAge.current.state.value = ''
  }
  return (
    <>
      <div className='flex-row'>
        <Input ref={personName} type='text' className='mr5' placeholder='name' />
        <Input ref={personAge} type='text' placeholder='age' />
        <Button className='ml5' onClick={handleAdd}>Add</Button>
      </div>
      <ul>
        {
          props.person.map(it => {
            return (
              <li key={it.id}>name: {it.name}, age: {it.age}</li>
            )
          })
        }
      </ul>
    </>
  )
}

export default connect(
  state => ({ person: state.person }),
  {
    personList: personCreate
  }
)(Person)
